import {useEffect, useState} from 'react';
import {useWindowListener} from '@/hook/useWindowListener';

import './index.css';
import {renderRoutes} from 'react-router-config';
import {Link} from 'react-router-dom';

export default function App(props: any) {
    const [position, setPosition] = useState({x: 100, y: 100});
    const [isDragging, setIsDragging] = useState(false);
    const [startPos, setStartPos] = useState({x: 0, y: 0});
    const [offset, setOffset] = useState({x: 0, y: 0});

    // 按下鼠标时，记录初始位置
    const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
        setIsDragging(true);
        setStartPos({x: e.clientX, y: e.clientY});
        setOffset({x: position.x, y: position.y});
    };

    useWindowListener('pointermove', (e: PointerEvent) => {
        if (isDragging) {
            // 计算差值
            const deltaX = e.clientX - startPos.x;
            const deltaY = e.clientY - startPos.y;
            // 差值 + 原本位置
            setPosition({x: offset.x + deltaX, y: offset.y + deltaY});
        }
    });

    useWindowListener('pointerup', () => {
        setIsDragging(false);
    });

    useEffect(() => console.log(111), []);
    
    return (
        <div className="box">
            <Link to="/editForm/search">Go to Search</Link>
            <div>
                {renderRoutes(props.route.routes)}
            </div>
            {/* <div
                style={{
                    position: 'absolute',
                    left: position.x,
                    top: position.y,
                    width: 100,
                    height: 200,
                    backgroundColor: 'lightblue',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    borderRadius: '10px',
                    cursor: 'grab',
                    userSelect: 'none',
                }}
            >
                <div
                    onPointerDown={handlePointerDown}
                    style={{
                        // position: 'absolute',
                        backgroundColor: 'pink',
                        borderRadius: '50%',
                        opacity: 0.6,
                        pointerEvents: 'auto',
                        width: 60,
                        height: 60,
                        top: 20,
                        cursor: 'grab',
                    }}
                >
                    拖拽我
                </div>
            </div> */}
        </div>
    );
}
